<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-组件</title>
    <script src="./static/vue2.js"></script>
    <script></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}<input type="text" v-model="title"></h1>
        <p>{{ content }}<input type="text" v-model="content"></p>
        <my-component v-bind:my-title.once="title" v-bind:my-content.once="content"></my-component>
    </div>

    <template id="com1">
        <div>
            <h1>{{ myTitle }}:<input type="text" v-model="myTitle"></h1>
            <p>{{ myContent }}:<input type="text" v-model="myContent"></p>
        </div>

    </template>

<script>

    var mv = new Vue({
        el : '#app',
        data : {
            title:'我是标题',
            content:'我是内容'
        },
        components : {
            'my-component' : {
                template:'#com1',
                props:['myTitle','myContent'] // 你是这个组件的属性，所以你得写到my-component 里面。。。  这里用的驼峰定义属性，在组件模板里面要用-分割开
            }

        }
    })
</script>
</body>
</html>